<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="css/main.css" rel="stylesheet" type="text/css"/>
<link href="css/mystyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
	function submitForm() {
		var username = document.getElementById('username').value;
		var password = document.getElementById('password').value;
		var confirmPassword = document.getElementById('confirmPassword').value;
		var email = document.getElementById('email').value;
		var emailRegex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		
		if (username=="" || password=="" || confirmPassword=="" || email=="") {
			document.getElementById('error1').style.display = 'block';
			return false;
		}
		if (!emailRegex.test(email)){
			document.getElementById('error3').style.display = 'block';
			return false;
		}
		if (password != confirmPassword) {
			document.getElementById('error2').style.display = 'block';
			return false;
		}
		
		return false;
	}
</script>
<title>Register</title>
</head>
<body>
	<form action="UserServlet" method="post" onsubmit="return submitForm()">
	<table>
	<tr>
		<td>Username*</td> <td><input id="username" type="text" name="username"/><br/></td>
	</tr>
	<tr>
		<td>Password*</td> <td><input id="password" type="password" name="password"><br/></td>
	</tr>
	<tr>
		<td>Confirm Password*</td> <td><input id="confirmPassword" type="password" name="confirmPassword"><br/></td>
	</tr>
	<tr>
		<td>Email*</td> <td><input id="email" type="text" name="email"><br/></td>
	</tr>
	<tr><td colspan="2">
		<p id="error1" class="error">Please input all information</p>
		<p id="error2" class="error">Pasword does not confirmed</p>
		<p id="error3" class="error">Email is invalid! Please input another!</p>
		<p style="color: red">${requestScope.ERROR}</p>
		<input type="submit" name="action" value="register"/>
	</td><tr>
	</table>
	</form>
</body>
</html>